<template>
  <div>
    <!-- 弹出层 -->
    <van-popup v-model="showPopup" @close="close" :style="{ height: '40%' }">
      <div class="title">输入支付密码</div>
      <div class="detail">为了您的账号资金安全，支付密码请勿告知他人，以免造成无法挽回的损失。</div>
      <div class="password-container">
        <!-- 6 个方块 -->
        <div class="password-boxes">
          <div
              v-for="(item, index) in inputs"
              :key="index"
              class="password-box"
              :class="{ active: currentIndex === index }"
              @click="focusInput(index)"
          >
            {{ item ? '*' : '' }}
          </div>
        </div>
        <!-- 隐藏的输入框 -->
        <input
            ref="hiddenInput"
            v-model="hiddenValue"
            type="number"
            maxlength="1"
            class="hidden-input"
            @input="handleInput"
            @keydown.delete="handleBackspace"
        />
      </div>
      <div class="error" v-show="error">密码错误，请核对后重新输入。</div>
      <div class="forgot" @click="toPayPwdSet">忘记支付密码?</div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'PayPwdInput',
  props: {
    // 控制弹出层的显示隐藏
    visible: {
      type: Boolean,
      default: false,
    },
    error:{
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showPopup: this.visible, // 弹出层显示状态
      inputs: Array(6).fill(''), // 6 个方块的值
      hiddenValue: '', // 隐藏输入框的值
      currentIndex: 0, // 当前聚焦的方块索引
    };
  },
  watch: {
    // 监听 visible 变化，同步到 showPopup
    visible(newVal) {
      this.showPopup = newVal;
      this.inputs = Array(6).fill('');
      if (newVal) {
        this.$nextTick(() => {
          this.focusInput(0); // 弹出层显示时，默认聚焦到第一个方块
        });
      }
    },
    // 监听 showPopup 变化，同步到 visible
    showPopup(newVal) {
      this.$emit('update:visible', newVal);
    },
  },
  methods: {
    toPayPwdSet(){
      this.$router.push('/payPwdSet')
    },
    // 处理输入
    handleInput() {
      if (this.hiddenValue) {
        this.inputs[this.currentIndex] = this.hiddenValue; // 更新当前方块的值
        this.hiddenValue = ''; // 清空隐藏输入框的值

        // 如果当前不是最后一个方块，跳到下一个方块
        if (this.currentIndex < 5) {
          this.currentIndex++;
          this.focusInput(this.currentIndex);
        } else {
          // 如果输入完成（6 位），触发完成事件
          this.$emit('complete', this.inputs.join(''));
        }
      }
    },
    // 处理回退键
    handleBackspace() {
      if (this.currentIndex > 0) {
        // 如果当前方块有值，先清空当前方块
        if (this.inputs[this.currentIndex]) {
          this.inputs[this.currentIndex] = '';
        } else {
          // 如果当前方块没有值，清空上一个方块
          this.currentIndex--;
          this.inputs[this.currentIndex] = '';
        }
        this.focusInput(this.currentIndex); // 聚焦到上一个方块
      }
    },
    // 聚焦到指定方块的输入框
    focusInput(index) {
      this.currentIndex = index;
      this.$refs.hiddenInput.focus();
    },
    // 清空输入框
    clear() {
      this.inputs = Array(6).fill('');
      this.currentIndex = 0;
      this.focusInput(0);
    },
    close(){
      this.$emit('close')
    }
  },
};
</script>

<style scoped>
.password-container {
  padding: 20px;
  text-align: center;
}

.password-boxes {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.password-box {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
}

.password-box.active {
  border-color: #1989fa;
}

.hidden-input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

.tip {
  margin-top: 20px;
  color: #888;
}

.title{
  font-size: 18px;
  font-weight: 600;
  padding: 16px;
}

.detail{
  padding: 0 16px;
  font-size: 14px;
  color: #888;
}
.error{
  color: red;
  font-size: 14px;
  padding: 0 16px;
}
.forgot{
  cursor: pointer;
  position: absolute;
  bottom: 16px;
  font-size: 14px;
  padding: 0 16px;
  color: #0C408D;
}
</style>
